<div class="body-wrp">
	<div class='left-banner'>
		<div data-dojo-type="dijit/layout/AccordionContainer" id="menu">
			<div data-dojo-type="dijit/layout/ContentPane"
				data-dojo-props='title:"Dojo Widget"'>
				<div class="sub-menu" url="chart.do" name="Charting">Chart</div>
				<div class="sub-menu" url="grid.do" name="Data Grid">Grid</div>
				<div class="sub-menu" url="form.do" name="Dijit Form">Form</div>
			</div>
			<div data-dojo-type="dijit/layout/ContentPane"
				data-dojo-props='title:"Custom Widget"'>
				<div class="sub-menu" url="chart.do" name="Charting">Chart</div>
			</div>
			<div data-dojo-type="dijit/layout/ContentPane" title="Interactions">
				<div class="sub-menu" url="svg.do" name="SVG">SVG</div>
			</div>
		</div>
	</div>
	<div >
		<div class="titleWrp">
			<div id="demoTitle">
				Widget Demo
			</div>
		</div>
		<div data-dojo-type="dijit/layout/ContentPane" id="content" title="Demo" class="content-wrp">
		</div>
	</div>
</div>
<script type="text/javascript">
	dojo.ready(function() {
		contentWrp = dijit.byId('content');
		contentTitle = dojo.byId('demoTitle');
		var menuItems = dojo.query("#menu .sub-menu");
		dojo.forEach(menuItems, function(item) {
			dojo.connect(item, 'onclick', function() {
				if (item.getAttribute('url') != null) {
					contentWrp.setHref(item.getAttribute('url'));
				}
				if (item.getAttribute('name') != null) {
					contentTitle.innerHTML = item.getAttribute('name');
				}
			});
		});
	});
</script>